<mat-card class="card">
  <mat-card-header>
    <h3 mat-card-title>
      <span>{{ 'Application Metadata' | translate }}</span>
    </h3>
  </mat-card-header>
  <mat-card-content>
    @if (appMetadata().host_mounts.length) {
      <ix-card-expand-collapse id="hostMounts" [maxHeight]="maxHeight()">
        <h4 class="card-subtitle">{{ 'Host Mounts' | translate }}</h4>
        <div class="details-list">
          @for (item of appMetadata().host_mounts; track item) {
            <div class="details-item">
              <div class="label">{{ item.hostPath }}</div>
              <div class="value">{{ item.description }}</div>
            </div>
          }
        </div>
      </ix-card-expand-collapse>
    }

    @if (appMetadata().capabilities?.length) {
      <ix-card-expand-collapse id="capabilities" [maxHeight]="maxHeight()">
        <h4 class="card-subtitle">{{ 'Capabilities' | translate }}</h4>
        <div class="details-list">
          @for (item of appMetadata().capabilities; track item) {
            <div class="details-item">
              <div class="label">{{ item.name }}</div>
              <div class="value">{{ item.description }}</div>
            </div>
          }
        </div>
      </ix-card-expand-collapse>
    }

    @if (appMetadata().run_as_context?.length) {
      <ix-card-expand-collapse id="runAsContext" [maxHeight]="maxHeight()">
        <h4 class="card-subtitle">{{ 'Run As Context' | translate }}</h4>
        <div class="details-list">
          @for (item of appMetadata().run_as_context; track item) {
            <div class="details-entry">
              <div class="details-item">
                <div class="label">{{ 'UID' | translate }}:</div>
                <div class="value">{{ item.uid }}</div>
              </div>
              <div class="details-item">
                <div class="label">{{ 'GID' | translate }}:</div>
                <div class="value">{{ item.gid }}</div>
              </div>
              <div class="details-item">
                <div class="label">{{ 'Username' | translate }}:</div>
                <div class="value">{{ item.user_name }}</div>
              </div>
              <div class="details-item">
                <div class="label">{{ 'Groupname' | translate }}:</div>
                <div class="value">{{ item.group_name }}</div>
              </div>
              <div class="details-item">
                <div class="label">{{ 'Description' | translate }}:</div>
                <div class="value">{{ item.description }}</div>
              </div>
            </div>
          }
        </div>
      </ix-card-expand-collapse>
    }
  </mat-card-content>
</mat-card>
